window.addEventListener('load',function(){
  
    //获取元素
    var focus = document.querySelector('.focus');
    var arrow_l = document.querySelector('.arrow_l');
    var arrow_r = document.querySelector('.arrow_r');
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.cricle');
    
  




    //1.鼠标经过，左右按钮显示，离开隐藏左右按钮
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        //清空定时器
        timer=null;
    })

    //2.鼠标经过，左右按钮显示，离开隐藏左右按钮
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
       timer=setInterval(function(){
            //手动调用
            arrow_r.click();
    
        },2000)

    })



    //3.动态生成小圆圈
    for (var i = 0; i < ul.children.length; i++) {
        //创建li
        var li = this.document.createElement('li');
        //通过自定义属性来获得当前的index
        li.setAttribute('index', i);
        //li插入到ol
        ol.appendChild(li);
        //4.点击小圆圈，当前小圆圈的颜色变化
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            //点击li,将index给num
            num=index;
            //点击li,将index给circle
            circle=index;
            //点击小圆圈，移动图片，移动的是ul
            var focusWidth = focus.offsetWidth;
            animate(ul, -index * focusWidth);
        })

    }
    // 给第一个设置current
    ol.children[0].className = 'current';
    //6.克隆第一张图片
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);


      //7.点击左箭头，图片变换
      var num = 0;

      //8.控制小圆圈的播放
      var circle = 0;


      //11.节流阀
      var flag=true;


      var focusWidth = focus.offsetWidth;
      //点击右侧按钮
    arrow_r.addEventListener('click', function () {
      if(flag){
          flag=false;
          if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
       
        num++;
        animate(ul,  -num*focusWidth,function(){
            //打开节流阀
            flag=true;
        });
        //8.点击右侧按钮，小圆圈一起变换，可以在声明一个变量来控制小圆圈的播放
        circle++;
        if (circle == ol.children.length) {
            circle = 0;
        }
        circleChange();
      }
     
    })



    //左侧按钮
    arrow_l.addEventListener('click', function () {
       if(flag){
           flag=false;
           if (num == 0) {
            num =ul.children.length-1;
            console.log(ul.children);
            ul.style.left = -num* focusWidth+'px';
           
        }
        num--;
        animate(ul, -num*focusWidth,function(){
            // console.log( - num*focusWidth);
            //打开节流阀
            flag=true;

        });
        //8.点击右侧按钮，小圆圈一起变换，可以在声明一个变量来控制小圆圈的播放
        circle--;
        if (circle < 0) {
            circle = ol.children.length-1;
        }
        circleChange();
      
       }


    })
    function circleChange(){
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
        // console.log(circle);
    }
    //10.自动播放轮播图
 var timer=setInterval(function(){
    //手动调用
    arrow_r.click();

},2000)




// $(function(){
//     //封装到一个函数里面，页面打开直接调用，防止页面刷新出现空白
//     //互斥锁
//     var flag=true;
//     function toggleTool(){
//         if($(document).scrollTop()>= toolTop){
//             $('.fixedtool').fadeIn();
//         }
//         else{
//             $('.fixedtool').fadeOut();
//         }
//     }
//     toggleTool();  
//     //页面滚动事件
//     var toolTop= $('.recom').offset().top;
//     $(window).scroll(function(){
//         toggleTool();    
//       if(flag){
//             //页面滚动到某一模块，添加curent类
//         $('.floor .w').each(function(i,ele){
//             if($(window).scrollTop()>=$(ele).offset().top){
//               $('.fixedtool li').eq(i).addClass('curent').siblings().removeClass('curent');
//             }
//         })  
//       }


//     })
//     //点击fixedtool,到相对应的模块
//     $('.fixedtool li').click(function(){
//         flag=false;
//         var index=$(this).index();
//         console.log(index);
//         //索引号对应楼层的索引号
//         //选出对应内容区的盒子要去的位置
//         var current=$('.floor .w').eq(index).offset().top;
//         //页面动画滚动效果
//         //注意：animate针对于元素$('body,html')
//         $('body, html').stop().animate({
//             scrollTop:current
//         },function(){
//             flag=true;
//         });
//         //点击，当前li添加curent类
//         $(this).addClass('curent').siblings().removeClass('curent');  
//     })



// })
})

